<template>
  <el-row style="height: 100%">
    <div id="main2" style="height: 100%"></div>
  </el-row>
</template>

<script>
import * as echarts from 'echarts';
import {
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import {
  BarChart
} from 'echarts/charts';
import {
  CanvasRenderer
} from 'echarts/renderers';

echarts.use(
    [ToolboxComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer]
);
export default {
  name: "PieChart",
  data() {
    return {
      option: {
        title: {
          text: '食品订单占比'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        grid: {
          left: '3%',
          right: '4%',
          containLabel: true
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      }
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      this.axios.get('/food_pie_chart',{
        headers: {
          'content-type':'application/json',
          'token':this.$cookies.get("token")
        }
      }).then((res)=>{
        if (res.data.code == 200) {
          let num_list = res.data.data
          this.option.series[0].data = num_list
          var chartDom = document.getElementById('main2');
          var myChart = echarts.init(chartDom);
          this.option && myChart.setOption(this.option);
        }
      }).catch((res)=>{
        console.log(res);
      })
    }
  }
}
</script>

<style scoped>

</style>